<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-监听数组的方法</title>
    <script type="text/javascript" src="../VueJs/vue.js"></script>
</head>
<body>
    <!-- 
        总结：
            a. 观察发现，_data 中的数据，如果是数组，那么数据监听只会对数组本身做监听
                数组里面的每一项并没有发生监听，也没有 get 和 set 函数
                导致当数组的项发生了改变，dom并没有更新
            b. vue 内部提供了几个变更数组的方法，这几个方法都有一个特征，会改变原数组
                这几个方法叫做 push pop shift unshift splice sort reverse
                只是这几个方法已经不是原先数组构造函数原型上的方法了，被包装过了
            c. 补充: 如果替换原数组，监视会检测到，dom也会更新，因为地址发生了改变
     -->
    <div id="demo">
        <h3>数组的变化</h3>
        <p>
            爱好： {{ arr }}
        </p>
        <!-- <button @click="arr[0] = '学习'">点击修改数组</button> -->
        <!-- <button @click="arr.splice(0, 1, '学习')">点击修改数组</button> -->
        <!-- <button @click="arr = ['学习']">点击修改数组</button> -->
        <button @click="fn">点击获取</button>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#demo',
            data: {
                arr: ['唱', '跳', 'rap', '篮球'],
                obj: {
                    a: {
                        b: 10
                    }
                }
            },
            methods: {
                fn() {
                    alert(this.arr[0])
                }
            }
        })

        console.log(vm)

        // var arr = []
        // arr.push(1)
        // arr.push === Array.prototype.push  // true
        // vm 实例上的数组方法和数组构造函数原型上的方法不一致
        // vm.push === Array.prototype.push  // false

        // vue 被包装过的数组方法有：
        // push pop unshift shift splice  sort reverse
        // 这些方法都有相同的特征，会影响原数组
    </script>
</body>
</html>